


import { Ajax } from '@/api/api'
import MyHead from '@/components/MyHead'
import React, { FC, useEffect, useState , useCallback, useLayoutEffect  } from 'react'
import { Space, Swiper ,Image , Tabs, Toast } from 'antd-mobile'
import { baseURL } from '@/api/request'
import styles from './index.less'
import ListItem from '@/components/ListItem'
import LoadMore from '@/components/LoadMore'
import { ShowToast } from '@/utils/message'

const HomePage:FC = () => {
    const pageSize = 10; 
    const [type,setType] = useState<string>('1')  // 1 hot 2 new
    const [page,setPage] = useState<number>(1)    // 当前页码
    const [total,setTotal] = useState<number>(pageSize)   // 总条数
      // 每条多少条 
    let [list,setList] = useState<any>([])
    const [banners,setBanners] = useState<any>([])

    const gettravelbanners =  useCallback(async ()=>{
        let res:any = await Ajax.gettravelbanners()
        setBanners(res.result)
    },[])
    
    
    const refreshData = useCallback(async ()=>{
        let res:any = await Ajax.gethomelist({
            type:type,
            page,
            pageSize,
        })
        if(res.code==200){
            setTotal(res.total)
            setList(res.result)
        }
    },[])
   
    const gethomelist = useCallback(async (payload:any)=>{
        let res:any = await Ajax.gethomelist(payload)
        if(res.code==200){
            setTotal(res.total)
            setList(res.result)
            gettravelbanners()
        }
    },[])

    useLayoutEffect(()=>{
        
    },[])

    useEffect(()=>{
        gethomelist({
            type,
            page,
            pageSize
        })
    },[])

    // 请求下一页的数据 
    const loadDataByPage = async (dataAdd:any,dataEnd:any)=>{
        // 一共 188 条数据  每页 10条  最多 19页 
        // page = 20 
        setPage(page+1)
        // console.log(page)
        // console.log(total)
        // console.log(Math.ceil(total/ pageSize))
        if(page> Math.ceil(total/ pageSize)){
            // ShowToast('数据见底了')
            console.log('end-end-end')
            dataEnd()  // 通知全部加载 
        }else{
            // 第二页数据 
            let res :any  = await Ajax.gethomelist({
                page,
                type,
                pageSize, 
            })
            console.log("list - add")
            var arr  = list.concat(res.result)
            setList([...arr])
            setTotal(res.total)
            dataAdd()  // t通知第二页加载完毕 
        }
    }

    // watch 
    // useLayoutEffect(()=>{
    //     console.log(type)
    //     gethomelist({
    //         type,
    //         page,
    //         pageSize
    //     })
    // },[type])

    const changeType = (type:string)=>{
        console.log(type)
        setPage(1)   // 默认请求第一页的数据 
        setType(type)
        gethomelist({type,page:1,pageSize})
    }
    return (
        <div>
            <MyHead title='首页' back={true}></MyHead>
            <div className="banners">
                <Swiper autoplay={true} slideSize={86} trackOffset={7} loop stuckAtBoundary={false}
                    indicator={(total, current) => (
                        <div className={styles.customIndicator}>
                        {`${current + 1} / ${total}`}
                        </div>
                    )}
                >
                    {
                        banners.map((item:any,index:any)=>(
                            <Swiper.Item key={index}>
                                <Image style={{height:180}}  src={item.imgs[0].url.replace(/public/,baseURL)} ></Image>
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
            </div>
            <div className="homebox">
                <div className="navs">
                    <Tabs
                        style={{
                            '--active-line-color':'var(--adm-color-danger)',
                            '--active-title-color':'var(--adm-color-danger)',
                        }}
                        activeKey={type}
                        onChange={changeType}
                    >
                        <Tabs.Tab title='最热推荐' key='1'>
                            <LoadMore loadDataByPage={loadDataByPage}  refreshData={refreshData}  >
                                {
                                    list.map((item:any,index:any)=>{
                                        return (
                                            <ListItem  tab={type} flag={true} item={item} key={index} ></ListItem>
                                        )
                                    })
                                }
                            </LoadMore>
                            
                        </Tabs.Tab>
                        <Tabs.Tab title='最新推荐' key='2'>
                            <LoadMore loadDataByPage={loadDataByPage}  refreshData={refreshData} >
                                {
                                    list.map((item:any,index:any)=>{
                                        return (
                                            <ListItem tab={type} flag={true} item={item} key={index} ></ListItem>
                                        )
                                    })
                                }
                            </LoadMore>
                        </Tabs.Tab>
                    </Tabs>
                </div>
            </div>
        </div>
    )
}

export default HomePage